<template>
  <view class="container">
    <uni-list>
      <!-- 上传封面 -->
      <uni-list-item :border="false">
        <template #body>
          <view style="font-size: 28rpx; margin-bottom: 15rpx">上传封面：</view>
          <view style="display: flex; flex-wrap: wrap">
            <view v-if="actinfo.cover_image != ''" style="position: relative; width: 198rpx; height: 198rpx; display: inline-block">
              <image :src="actinfo.cover_image" class="imageitem" mode="aspectFill"></image>
              <view class="del" @click="delcoverimage">
                <uni-icons type="closeempty" color="#fff" size="10"></uni-icons>
              </view>
            </view>
            <view class="upload" @click="openablum1" v-if="actinfo.cover_image == ''">
              <uni-icons type="plusempty" color="#999999" size="30" style="margin-left: 50rpx; margin-bottom: 20rpx"></uni-icons>
              <view style="text-align: center; font-size: 24rpx; color: #999999">上传图片</view>
            </view>
          </view>
        </template>
      </uni-list-item>
      <!-- 上传图片 -->
      <uni-list-item :border="false">
        <template #body>
          <view style="font-size: 28rpx; margin-bottom: 30rpx">上传图片：</view>
          <view style="display: flex; flex-wrap: wrap">
            <view
              v-if="actinfo.banner_images.length != 0"
              v-for="(item, index) in actinfo.banner_images"
              :key="index"
              style="position: relative; width: 198rpx; height: 198rpx; display: inline-block"
            >
              <image :src="item" class="imageitem" mode="aspectFill"></image>
              <view class="del" @click="delbannerimage(index)">
                <uni-icons type="closeempty" color="#fff" size="10"></uni-icons>
              </view>
            </view>
            <view class="upload" @click="openablum2" v-if="actinfo.banner_images.length < 5">
              <uni-icons type="plusempty" color="#999999" size="30" style="margin-left: 50rpx; margin-bottom: 20rpx"></uni-icons>
              <view style="text-align: center; font-size: 24rpx; color: #999999">上传图片</view>
            </view>
          </view>
        </template>
      </uni-list-item>
      <!-- 活动名称 -->
      <uni-list-item :border="false" ellipsis="2" title="活动名称" rightText="请输入">
        <template #footer>
          <input class="nameinput" placeholder="请输入" v-model="actinfo.title" />
        </template>
      </uni-list-item>
      <!-- 活动类型 -->
      <uni-list-item showArrow title="活动类型" :border="false" :rightText="showact || '请选择'" clickable="true" @click="$refs.popup.open()" />
      <uni-list-item :border="false" title="活动时间">
        <!-- 右侧自定义内容 -->
        <template #footer>
          <uni-icons type="down" size="30" color="#404040"></uni-icons>
          <view style="display: flex">
            <view @click="chooseSartTime">
              <view class="starttime">
                <view v-if="actinfo.start_time == ''">开始时间</view>
                <view v-else>{{ actinfo.start_time }}</view>
              </view>
            </view>
            <text style="margin: 0 20rpx">-</text>
            <view @click="chooseEndTime">
              <view class="starttime">
                <view v-if="actinfo.end_time == ''">结束时间</view>
                <view v-else>{{ actinfo.end_time }}</view>
              </view>
            </view>
          </view>
        </template>
      </uni-list-item>
      <!--  活动地点-->
      <uni-list-item showArrow title="活动位置" :border="false" :rightText="actinfo.address || '请选择'" clickable="true" @click="chooseLoacal" />
      <!-- 最少人数 -->
      <uni-list-item title="最少人数:" :border="false">
        <template #footer>
          <input type="text" class="nameinput" placeholder="请输入" maxlength="3" v-model="actinfo.min_num" />
        </template>
      </uni-list-item>
      <view class="tip">不能满足最少成团人数，报名自动取消</view>
      <!-- 最多人数 -->
      <uni-list-item title="最多人数:" :border="false">
        <template #footer>
          <input type="text" class="nameinput" placeholder="请输入" maxlength="3" v-model="actinfo.max_num" />
        </template>
      </uni-list-item>
      <!-- 报名价格 -->
      <uni-list-item title="报名价格(元):" :border="false">
        <template #footer>
          <input type="text" class="nameinput" placeholder="请输入" v-model="actinfo.price" />
        </template>
      </uni-list-item>
      <!-- 联系方式 -->
      <uni-list-item title="联系方式:" :border="false">
        <template #footer>
          <input type="text" class="nameinput" placeholder="请输入" maxlength="11" v-model="actinfo.phone" />
        </template>
      </uni-list-item>
      <!-- 上传微信二维码 -->
      <uni-list-item :border="false">
        <template #body>
          <view style="font-size: 28rpx; margin-bottom: 30rpx">微信二维码：</view>
          <view style="display: flex; flex-wrap: wrap">
            <view v-if="actinfo.wx_qrcode_image != ''" style="position: relative; width: 198rpx; height: 198rpx; display: inline-block">
              <image :src="actinfo.wx_qrcode_image" class="imageitem" mode="aspectFill"></image>
              <view class="del" @click="delqrcodeimage">
                <uni-icons type="closeempty" color="#fff" size="10"></uni-icons>
              </view>
            </view>
            <view class="upload" @click="openablum3" v-if="actinfo.wx_qrcode_image == ''">
              <uni-icons type="plusempty" color="#999999" size="30" style="margin-left: 50rpx; margin-bottom: 20rpx"></uni-icons>
              <view style="text-align: center; font-size: 24rpx; color: #999999">上传图片</view>
            </view>
          </view>
        </template>
      </uni-list-item>
      <!-- 上传群微信二维码 -->
      <uni-list-item :border="false">
        <template #body>
          <view style="font-size: 28rpx; margin-bottom: 30rpx">群微信二维码：</view>
          <view style="display: flex; flex-wrap: wrap">
            <view v-if="actinfo.wx_group_qrcode_image != ''" style="position: relative; width: 198rpx; height: 198rpx; display: inline-block">
              <image :src="actinfo.wx_group_qrcode_image" class="imageitem" mode="aspectFill"></image>
              <view class="del" @click="delgroupqrcodeimage">
                <uni-icons type="closeempty" color="#fff" size="10"></uni-icons>
              </view>
            </view>
            <view class="upload" @click="openablum4" v-if="actinfo.wx_group_qrcode_image == ''">
              <uni-icons type="plusempty" color="#999999" size="30" style="margin-left: 50rpx; margin-bottom: 20rpx"></uni-icons>
              <view style="text-align: center; font-size: 24rpx; color: #999999">上传图片</view>
            </view>
          </view>
        </template>
      </uni-list-item>
      <!-- 编辑详情内容 -->
      <uni-list-item :border="false">
        <template #footer>
          <view style="margin-bottom: 15rpx; font-size: 28rpx">活动流程：</view>
          <editer @context="recivecontext" :data="actinfo.content" v-if="actinfo.content"></editer>
        </template>
      </uni-list-item>
      <view>
        <button class="push" @click="pushact">保存</button>
      </view>
    </uni-list>

    <!-- 活动类型弹框 -->
    <uni-popup ref="popup" type="bottom" backgroundColor="#fff">
      <view class="acttype">
        <view>
          <view class="acttypetitle">
            活动类型
            <uni-icons type="closeempty" size="20" style="margin-left: 220rpx" @click="$refs.popup.close()"></uni-icons>
          </view>
        </view>
        <!-- picker -->
        <picker-view indicator-style="height: 50px;" :value="0" @change="acttypeChange" style="height: 300rpx; margin: 50rpx 0">
          <picker-view-column>
            <view style="text-align: center; line-height: 100rpx" v-for="(item, index) in acttypeList" :key="index">{{ item.name }}</view>
          </picker-view-column>
        </picker-view>
        <button class="btngender" @click="$refs.popup.close()">确定</button>
      </view>
    </uni-popup>
    <!-- 开始时间弹框 -->
    <uni-popup ref="startTime" type="bottom" backgroundColor="#fff">
      <view style="width: 750rpx; height: 594rpx">
        <view style="margin-top: 26rpx">
          <text class="timetitle">活动时间</text>
          <image src="../static/icon/close.png" mode="" class="closeicon" @click="closetimepupop"></image>
        </view>
        <!-- 弹框内显示时间 -->
        <!--   <view class="currentTime">2022-09-09 14時 30分</view> -->
        <!-- 时间选择器 -->
        <view>
          <datetime type="day" ref="dateDom" :openStatus="true" :getDayNum="30" :chooesMaxDay="30" @select="onSelectTime"></datetime>
        </view>
        <view style="margin-top: 40rpx">
          <button class="timebtn" @click="okstartTime">确认</button>
        </view>
      </view>
    </uni-popup>
    <!-- 结束时间弹框 -->
    <uni-popup ref="endTime" type="bottom" backgroundColor="#fff">
      <view style="width: 750rpx; height: 594rpx">
        <view style="margin-top: 26rpx">
          <text class="timetitle">活动时间</text>
          <image src="../static/icon/close.png" mode="" class="closeicon" @click="$refs.endTime.close()"></image>
        </view>
        <!-- 弹框内显示时间 -->
        <!-- <view class="currentTime">2022-09-09 14時 30分</view> -->
        <!-- 时间选择器 -->
        <view>
          <dateendtime type="day" :openStatus="true" ref="endTimeDom" :getDayNum="30" :chooesMaxDay="30" @select2="onSelectTime2"></dateendtime>
        </view>
        <view style="margin-top: 40rpx">
          <button class="timebtn" @click="okendtime">确认</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import datetime from './component/datetime.vue';
import dateendtime from './component/dateendtime.vue';
import editer from './component/myedit.vue';

import { btoa } from 'js-base64';
import { timeChange } from '@/utils/tools.js';
export default {
  onPageScroll(e) {
    // e.scrollTop 表示当前页面滚动的距离
    // console.log('页面滚动距离：', e.scrollTop);
  },

  components: {
    datetime,
    editer,
    dateendtime
  },

  data() {
    return {
      acttypeList: [],
      // acttypeList2: ['周边游', '市内游', '聚餐', '剧本杀', '羽毛球', '骑行', '其他'],
      showact: '',
      actinfo: {
        activity_type_id: '',
        cover_image: '',
        banner_images: '',
        title: '',
        start_time: '',
        end_time: '',
        address: '',
        min_num: '',
        max_num: '',
        price: '',
        phone: '',
        wx_qrcode_image: '',
        wx_group_qrcode_image: '',
        content: undefined,
        province: '',
        city: '',
        area: ''
      },
      id: null
    };
  },

  async onLoad(opt) {
    console.log('编辑活动的id=----', opt);
    this.id = opt.id;
    // 获取活动详情
    await this.getactdetail(opt.id);
    // 获取活动类型
    await this.gteactlist();
  },

  methods: {
    // 获取活动详情
    async getactdetail(id) {
      const res = await uni.$http.post('index/getActivityInfo', {
        activity_id: id
      });
      console.log('活动详情---', res.data.data);
      for (let k in this.actinfo) {
        this.actinfo[k] = res.data.data[k];
      }
      console.log('活动的详情数据----', this.actinfo);
      this.actinfo.start_time = timeChange(this.actinfo.start_time).split(':')[0] + ':' + timeChange(this.actinfo.start_time).split(':')[1];
      this.actinfo.end_time = timeChange(this.actinfo.end_time).split(':')[0] + ':' + timeChange(this.actinfo.end_time).split(':')[1];
    },
    // 保存活动
    async pushact() {
      if (new Date(this.actinfo.start_time).getTime() < new Date().getTime()) {
        uni.showToast({
          title: '活动开始时间不能小于现在的时间',
          icon: 'none'
        });
        return;
      }
      if (!/^1[3-9][0-9]{9}$/.test(this.actinfo.phone)) {
        uni.showToast({
          title: '手机号格式不正确',
          icon: 'none'
        });
        return;
      }
      this.actinfo.start_time = String(new Date(this.actinfo.start_time).getTime() / 1000);
      this.actinfo.end_time = String(new Date(this.actinfo.end_time).getTime() / 1000);
      this.actinfo.banner_images = this.actinfo.banner_images.join(',');
      this.actinfo.token = JSON.parse(uni.getStorageSync('userinfo') || '{}').token;
      this.actinfo.content = btoa(unescape(encodeURIComponent(this.actinfo.content)));
      this.actinfo.province = '北京市';
      this.actinfo.activity_id = this.id;
      console.log('编辑保存的数据域----', this.actinfo);
      const res = await uni.$http.post('user/editActivity', {
        ...this.actinfo
      });
      console.log(res);
      if (res.data.code == 1) {
        uni.redirectTo({
          url: '/sub_my/exportactdata/exportactdata'
        });
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: 'none'
        });
      }
    },
    // 打开相册
    openablum1() {
      uni.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        sizeType: ['original', 'compressed'],
        camera: 'front',
        success: (res) => {
          console.log('-------', res);
          // 选择玩之后调用上传图片方法
          uni.showLoading({
            title: '正在上传图片'
          });
          uni.uploadFile({
            url: 'https://activity.jiangkukeji.cn/api/common/upload',
            filePath: res.tempFiles[0].tempFilePath,
            name: 'file',
            formData: {
              token: JSON.parse(uni.getStorageSync('userinfo') || '{}').token
            },
            success: (res2) => {
              console.log('上传完成时的回调---', JSON.parse(res2.data));
              const data = JSON.parse(res2.data);
              if (data.code == 1) {
                uni.hideLoading();
                console.log('数据回显查看数组的长度------', data);
                this.actinfo.cover_image = data.data.fullurl;
              } else {
                uni.hideLoading();
                uni.showToast({
                  title: '图片上传失败',
                  icon: 'none'
                });
              }
            }
          });
        }
      });
    },
    // 删除封面图片
    delcoverimage() {
      this.actinfo.cover_image = '';
      console.log('删除后的图片---', this.actinfo.cover_image);
    },
    // 打开轮播上传图片
    openablum2() {
      uni.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        sizeType: ['original', 'compressed'],
        camera: 'front',
        success: (res) => {
          console.log('-------', res);
          // 选择玩之后调用上传图片方法
          uni.showLoading({
            title: '正在上传图片'
          });
          uni.uploadFile({
            url: 'https://activity.jiangkukeji.cn/api/common/upload',
            filePath: res.tempFiles[0].tempFilePath,
            name: 'file',
            formData: {
              token: JSON.parse(uni.getStorageSync('userinfo') || '{}').token
            },
            success: (res2) => {
              console.log('上传完成时的回调---', JSON.parse(res2.data));
              const data = JSON.parse(res2.data);
              if (data.code == 1) {
                uni.hideLoading();
                console.log('数据回显查看数组的长度------', data);
                this.actinfo.banner_images.push(data.data.fullurl);
              } else {
                uni.hideLoading();
                uni.showToast({
                  title: '图片上传失败',
                  icon: 'none'
                });
              }
            }
          });
        }
      });
    },
    // 删除轮播图
    delbannerimage(index) {
      this.actinfo.banner_images.splice(index, 1);
    },
    // 上传微信二维码
    openablum3() {
      uni.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        sizeType: ['original', 'compressed'],
        camera: 'front',
        success: (res) => {
          console.log('-------', res);
          // 选择玩之后调用上传图片方法
          uni.showLoading({
            title: '正在上传图片'
          });
          uni.uploadFile({
            url: 'https://activity.jiangkukeji.cn/api/common/upload',
            filePath: res.tempFiles[0].tempFilePath,
            name: 'file',
            formData: {
              token: JSON.parse(uni.getStorageSync('userinfo') || '{}').token
            },
            success: (res2) => {
              console.log('上传完成时的回调---', JSON.parse(res2.data));
              const data = JSON.parse(res2.data);
              if (data.code == 1) {
                uni.hideLoading();
                console.log('数据回显查看数组的长度------', data);
                this.actinfo.wx_qrcode_image = data.data.fullurl;
              } else {
                uni.hideLoading();
                uni.showToast({
                  title: '图片上传失败',
                  icon: 'none'
                });
              }
            }
          });
        }
      });
    },
    delqrcodeimage() {
      this.actinfo.wx_qrcode_image = '';
    },
    // 上传微信群二维码
    openablum4() {
      uni.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        sizeType: ['original', 'compressed'],
        camera: 'front',
        success: (res) => {
          console.log('-------', res);
          // 选择玩之后调用上传图片方法
          uni.showLoading({
            title: '正在上传图片'
          });
          uni.uploadFile({
            url: 'https://activity.jiangkukeji.cn/api/common/upload',
            filePath: res.tempFiles[0].tempFilePath,
            name: 'file',
            formData: {
              token: JSON.parse(uni.getStorageSync('userinfo') || '{}').token
            },
            success: (res2) => {
              console.log('上传完成时的回调---', JSON.parse(res2.data));
              const data = JSON.parse(res2.data);
              if (data.code == 1) {
                uni.hideLoading();
                console.log('数据回显查看数组的长度------', data);
                this.actinfo.wx_group_qrcode_image = data.data.fullurl;
              } else {
                uni.hideLoading();
                uni.showToast({
                  title: '图片上传失败',
                  icon: 'none'
                });
              }
            }
          });
        }
      });
    },
    // 删除群微信二维码
    delgroupqrcodeimage() {
      this.actinfo.wx_group_qrcode_image = '';
    },
    // 获取活动类型
    async gteactlist() {
      const res = await uni.$http.post('index/getActivityType', {
        token: JSON.parse(uni.getStorageSync('userinfo') || '{}').token
      });
      console.log(res);
      this.acttypeList = res.data.data;
      this.acttypeList.unshift('');
      console.log('------ this.acttypeList-----', this.acttypeList);
      console.log(
        '遍历之前的数组----',
        this.actinfo,
        this.actinfo.activity_type_id,
        this.acttypeList.filter((item) => {
          return item.id == this.actinfo.activity_type_id;
        })
      );
      this.showact = this.acttypeList.filter((item) => {
        return item.id == this.actinfo.activity_type_id;
      })[0].name;

      console.log('this.showact--------', this.showact);
    },

    // 选择活动类型改变
    acttypeChange(value) {
      // 显示活动类型
      this.showact = this.acttypeList.filter((item) => {
        return item.id == this.acttypeList[value.detail.value].id;
      })[0].name;
      console.log('活动类型id---', value.detail.value);
      this.actinfo.activity_type_id = this.acttypeList[value.detail.value].id;
    },
    // 选择开始时间
    chooseSartTime() {
      this.$refs.startTime.open();
    },
    // 开始时间的组件事件
    onSelectTime(value) {
      console.log(value);
      this.actinfo.start_time = value.time;

      // if (this.actinfo.id != '') {
      //   this.startTime = value.time;
      // } else {
      //   this.startTime = '';
      // }
      this.$refs.startTime.close();
    },
    // 获取结束时间
    onSelectTime2(value) {
      console.log(value);
      this.actinfo.end_time = value.time;
      // if (this.actinfo.id != '') {
      //   this.endTime = value.time;
      // } else {
      //   this.endTime = '';
      // }
      this.$refs.endTime.close();
      const start = new Date(this.actinfo.start_time).getTime();
      const end = new Date(this.actinfo.end_time).getTime();
      if (end - start < 0) {
        uni.showToast({
          title: '结束时间不能小于开始时间',
          icon: 'none'
        });
        this.actinfo.end_time = '';
        return;
      }
    },
    // 获取子组件内的确认开始时间方法
    okstartTime() {
      this.$refs.dateDom.confirm();
    },
    // 获取子组件内的确认结束时间的方法
    okendtime() {
      this.$refs.endTimeDom.confirm();
    },
    // 选择结束时间
    chooseEndTime() {
      this.$refs.endTime.open();
    },
    // 选择位置
    chooseLoacal() {
      uni.chooseLocation({
        success: (res) => {
          if (!res.address.includes('北京')) {
            return uni.showToast({
              title: '该区域功能暂未开放',
              icon: 'none'
            });
          }
          this.actinfo.address = res.address;
          this.actinfo.area = res.address.split('区')[0].split('市')[res.address.split('区')[0].split('市').length - 1] + '区';
          console.log(this.actinfo.area);
          this.actinfo.city = res.address.split('市')[0]?.split('省')[res.address.split('市')[0]?.split('省').length - 1] + '市';
          console.log(this.actinfo.city);
          this.actinfo.province = '北京市';
          console.log(this.actinfo.province);
        }
      });
    },
    // 关闭开始时间选择
    closetimepupop() {
      this.$refs.startTime.close();
    },
    // 获取标记的详情
    recivecontext(value) {
      console.log('查看是否有图片---', value);
      this.actinfo.content = value;
    }
  }
};
</script>

<style lang="less" scoped>
// 活动类型弹框
.acttype {
  width: 750rpx;
  height: 594rpx;
  .acttypetitle {
    margin-top: 40rpx;
    font-style: 32rpx;
    font-weight: bold;
    padding-left: 330rpx;
    color: #333333;
  }

  .btngender {
    width: 670rpx;
    height: 90rpx;
    color: #fff;
    background: linear-gradient(180deg, #0398ff 0%, #21e5ff 100%);
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
}
// 修改编辑框的字体图标大小
.toolbar .iconfont {
  font-size: 28rpx !important;
}
.uni-file-picker {
  overflow: visible !important;
}

.container {
  box-sizing: border-box;
  padding: 0 28prx;
}
// 选择封面的样式
.uni-file-picker__container {
  width: 160rpx;
  height: 160rpx;
}
.file-picker__box {
  width: 100%;
  height: 100%;
}
.starttime {
  width: 220rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 24rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  opacity: 1;
  border: 2rpx solid #f1f1f1;
}
// 修改活动名称的样式
.nameinput {
  text-align: right;
  font-size: 24rpx;
}
.file-picker__box {
}
.file-picker__box-content {
  width: 160rpx;
  height: 160rpx;
}
// 发布按钮
.push {
  width: 670rpx;
  height: 90rpx;
  font-size: 30rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  line-height: 90rpx;
  color: #ffffff;
  background: linear-gradient(11deg, #0091ff 0%, #21e5ff 100%);
  border-radius: 46rpx 46rpx 46rpx 46rpx;
}

.tip {
  width: 340rpx;
  height: 28rpx;
  font-size: 20rpx;
  line-height: 28rpx;
  margin: 16rpx 28rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #ec1303;
}
// 选择时间的pupon
.closeicon {
  width: 36rpx;
  height: 36rpx;
  margin-left: 244rpx;
  margin-right: 30rpx;
}
.timetitle {
  width: 128rpx;
  height: 44rpx;
  font-size: 32rpx;
  margin-left: 312rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 0rpx;
}
.currentTime {
  width: 312rpx;
  height: 40rpx;
  font-size: 28rpx;
  margin: 38rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  color: #000000;
  line-height: 0rpx;
}
.timebtn {
  width: 690rpx;
  height: 90rpx;
  color: #fff;
  background: linear-gradient(11deg, #0091ff 0%, #21e5ff 100%);
  border-radius: 46rpx 46rpx 46rpx 46rpx;
  opacity: 1;
}
.upload {
  box-sizing: border-box;
  display: inline-block;
  width: 160rpx;
  height: 160rpx;
  background: #f8f8f8;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  padding-top: 30rpx;
}
.imageitem {
  box-sizing: border-box;
  width: 160rpx;
  height: 160rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.del {
  box-sizing: border-box;
  position: absolute;
  right: 15rpx;
  top: -15rpx;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  text-align: center;
  line-height: 35rpx;
  background-color: red;
}
</style>
